<template>
	<!-- 主界面 -->
	<div id="mianPage">
		<header id="header-top" ref="header-top">
			<div id="top">
				<div id="logo">
					<div>
						<router-link to="/main" class="logo-link">
							<img src="@/assets/logo.png" class="src-logo">
						</router-link>
					</div>

				</div>
				<div class="list">
					<div>
						<router-link to="/main/manager" class="list-link" v-if="manager()">
							管理
						</router-link>
					</div>
					<div class="list-content">
						<ul>
							<li>
								<router-link to="/main/manager/managerUser">用户管理</router-link>
							</li>
							
							<li>
								<router-link to="/main/manager/managerCar">车辆管理</router-link>
								
							</li>
							<li>
								<router-link to="/main/manager/managerNotice">公告管理</router-link>
								
							</li>
						</ul>
					</div>

				</div>
				<div class="time">
					<span>{{timeShow |time}}</span>
				</div>
				<div class="user">

					<div class="unlogin" v-if="!this.$store.state.user">
						<router-link to="/login" class="login-link" >
							<img src="@/assets/beforelogin.png" class="src-login">
							未登录
						</router-link>
					</div>

					<div class="login" v-if="this.$store.state.user">
						<div class="login-link"  ref="img-pic">
							<img :src="pic" class="src-login" />
						</div>
						<div class="userDiv">
							<p>{{this.$store.state.user[0].username}}</p>
							<div class="userDiv-content">
								<ul>
									<li><a href="" @click.prevent="toMain" class="li-a">主页</a></li>
									<li><a href="" @click.prevent="toPersonalCenter" class="li-a">个人中心</a></li>
								</ul>
								
							</div>
							<div class="logout">
								<a href="" @click.prevent="logout()" > 退出</a>
							</div>
						</div>
					</div>
				</div>
				<div class="list-notice">
					<ul>
						<li>
							<router-link to="/main/news" class="list-link">消息</router-link>
						</li>
					</ul>

				</div>

			</div>

		</header>

		<div id="bg-image">
			<img src="../assets/bgc2.jpg" />
		</div>
		<div id="main1">
			<router-view></router-view>

		</div>

	</div>
</template>

<script>
	import BMap from 'BMap'

	export default {
		name: 'App',
		data() {
			return {
				isLogin: null,
				level: 0,
				pic: require('@/assets/beforelogin.png'),
				showUserDiv: false,
				car: '',
				timeShow:''
			}

		},
		watch:{
			time:{
				
			}
		},
		filters:{
			time: function(val) {
				if(val == ''){
					return ''
				}
				let hour = val.getHours().toString().padStart(2,'0')
				let minute = val.getMinutes().toString().padStart(2,'0')
				let second = val.getSeconds().toString().padStart(2,'0');
				let day = val.getDay();//系统时间中的星期值
				let weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
				let week = weeks[day]
				let time = `${val.getFullYear()}年${val.getMonth()+1}月${val.getDate()}日 ${hour}:${minute}:${second} ${week}`
				return time;
			}
		},
		created() {
			this.isLogin = this.$store.getters.getStorage;
			this.getUserPic();
			
			this.time();
		},
		methods: {
			time(){
				setInterval(()=>{
					this.timeShow = new Date();
				},1000)
			},
			logout() {
				this.$store.commit('removeStorage');
				this.$router.replace({
					path: '/login'
				})

			},
			manager() {
				if (this.$store.state.user != null) {
					if (this.$store.state.user[0].level == 1) {
						return true
					}
				}
				return false;
			},
			getUserPic() {
				this.$axios.get('/api/upload/getUserPic', {
						params: {
							user_id: this.$store.state.user[0].id
						},
						responseType: 'blob'
					})
					.then(data => {
						if (data.status == 200) {

							if (data.data.size != 0) {

								let reader = new FileReader()
								reader.onload = e => {
									this.pic = e.target.result
								}
								reader.readAsDataURL(data.data);
							}
						}
					})
			},
			changeshowUserDiv(val) {
				let a = this.$refs['img-pic'].firstChild.style;

				if (val == 1) {
					this.showUserDiv = true
					a.width = 42 + 'px';
					a.height = 42 + 'px';
				}
				if (val == 2) {
					this.showUserDiv = false
					a.width = '';
					a.height = '';
				}
			},
			getCarInfoByNum(car_num) {
				this.$axios.get('/api/info/carInfoByNum', {
						params: {
							id: car_num
						}
					})
					.then(data => {
						if (data.status == 200) {
							this.car = data.data[0];
							this.$store.commit('setUserCar', data.data[0])
						}
					})
					.catch(err => {
						console.log(err)
					})
			},
			toPersonalCenter() {
				this.$router.push({
					path: '/main/user/userinfo',
					query: {
						user_id: this.isLogin[0].id
					}
				})
			},
			toMain() {
				this.$router.push({
					path: '/main/map',
					query: {
						user_id: this.isLogin[0].id
					}
				})
			}

		}
	}
</script>

<style lang="less" scoped>
	#mianPage {
		width: 100%;
		height: 100%;

		#bg-image {
			width: 100%;
			min-width: 1920px;
			height: 180px;

			img {
				width: 100%;
				height: 180px;
				z-index: 12;
			}

		}

		#main1 {
			width: 80%;
			max-width: 1160px;
			min-width: 960px;


			position: relative;
			left: 50%;
			z-index: 11;
			height: 100%;
			transform: translateX(-50%);

		}

		#header-top {
			position: fixed;
			top: 0;
			width: 100%;
			height: 52px;
			border-bottom: 1px solid #ccc;
			z-index: 18;
			padding-top: 1px;
			background: #fff;
			background: rgba(255, 255, 255, 0.9);

			#top {
				width: 80%;
				max-width: 1160px;
				min-width: 960px;
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				height: 100%;
				display: flex;
				display: -webkit-flex;
				
				#logo {
					
					width: 100px;

					/*no*/
					.src-logo {
						width: 100px;
						/*no*/
						height: 50px;
						/*no*/
					}
				}
				.time{
					margin-right: 350px;
					position: absolute;
					top: 20px;
					right: 0;
					z-index: 15;
				}
				.list {
					width: 40px;
					height: 100%;
					text-align: left;
					padding-top: 18px;
					margin-left: 100px;
					position: relative;
					&:hover{
						.list-content{
							display: block;
						}
					}
					
					.list-link {
						font-size: 18px;
						color: black;
						position: relative;

						&::before {
							content: '';
							background: url('../assets/icon/manager.png') no-repeat;
							background-size: 24px 24px;
							color: #000;
							width: 24px;
							height: 24px;

							position: absolute;
							top: -1px;
							left: -24px;

						}
					}
					.list-content{
						display: none;
						width: 110px;
						position: absolute;
						top: 52px;
						left: -45px;
						background-color: #fff;
						border-radius:0 0 22px 2px;
						overflow: hidden;
						li{
							height: 42px;
							line-height: 40px;
							padding-left:30px; 
							a{
								color:#222;
								font-size: 12px;
							}
							&:hover{
								background-color: #e5e9ef;
								a{
									color:#00a1d6;
								}
							}
						}
						
						
					}
				}
				.user {
					margin-right: 200px;
					position: absolute;
					top: 2px;
					right: 0;
					z-index: 15;

					.login-link {
						position: absolute;
						top:5px;
						z-index: 20;
						transition:all 0.3s;	
						.src-login {
							width: 32px;
							height: 32px;
							border-radius: 50%;

						}

					}
					.login{
						overflow: hidden;
						display: flex;
						flex-direction: column;
						width: 32px;
						height: 32px;
						
						&:hover{
							overflow: visible;
							width: 48px;
							height: 48px;
							
							.login-link{
								top:20px;
								.src-login{
									width: 48px;
									height: 48px;
								}
							}
							
							.userDiv{
								opacity: 1;
								display: block;
								
								&::after{
									content:'';
									width:0px;
									height: 0px;
									position:absolute;
									top:0px;
									left: 60px;
								}
							}
						}
						.userDiv {
							opacity: 0;
							position: absolute;
							display: none;
							top: 50px;
							left: -62px;
							z-index: -1;
							background-color: rgba(255, 255, 255, 1);
							width: 170px;
							height: 120px;
							padding-top: 32px;
							border-radius: 0 0 10px 10px;
							color: black;
						
							p {
								color: #fb7299 !important;
								font-size: 18px;
							}
		
							.logout {
								position: absolute;
								bottom: 0;
								width: 100%;
								height: 30px;
								background-color:#f4f5f7; 
								margin-top: 15px;
								text-align: right;
								a{
									line-height: 30px;
									margin-right:10px; 
									color: #222;
									font-size: 12px;
								}
							}
						.userDiv-content{
							ul li {
								display: inline-block;
								margin-top: 18px;
								margin-left: 10px;
								font-size: 14px;
								
								a{
									color: #000;
									&:hover{
										color: #00a1d6;
									}
								}
							}
													
							}
							
							
						}
					}
					

				}

				.list-notice {
					position: absolute;
					top: 15px;
					right: 20px;
					transform: translateX(-100%);

					ul li {
						position: relative;
					}

					.list-link {
						color: #000;

						&::after {
							content: '';
							background: url('../assets/icon/news.png') no-repeat;
							background-size: 22px 22px;
							width: 22px;
							height: 22px;

							position: absolute;
							top: -3px;
							right: -22px;

						}
					}
				}
			}

		}
	}
</style>
